<template>
  <div class="mainContent">
    <div class="search-content-wrapper">
      <div class="home-big-logo"><img src="../assets/img/logo-search.png"></div>
      <div class="home-search-wrapper">

        <form method="get" id="home-searchform" class="clearfix" action="http://design.flyme.cn/search.html">
          <div class="fdsug-layout">
            <ul>
              <a>
                <li class="bdsug-overflow"><span>更新</span></li>
              </a>
              <a>
                <li class="bdsug-overflow"><span>Flyme</span></li>
              </a>
              <a>
                <li class="bdsug-overflow">新固件</li>
              </a>
              <a>
                <li class="bdsug-overflow">公共控件</li>
              </a>
            </ul>
          </div>
          <span class="icon-search glyphicon glyphicon-search btn-lg"></span>
          <input class="home-form-control" type="text" name="s" id="s" required="required" placeholder="搜索你想要的内容"
                 autocomplete="off" @click="click($event)"/>
          <input type="submit" class="search-btn" value="搜索">
        </form>
      </div>
    </div>

    <div class="main-content clearfix">
      <section class="hot-content container">
        <h2 class="hot-content-title">热门内容</h2>
        <a v-for="item in standard" class="hot-content-link col-xs-6 col-sm-2"
           :href="item.id" target="_blank"><img class="hot-content-img"
                                                :src="item.icon">
          <h6 class="hot-content-heading">{{ item.title }}</h6></a>
      </section>

      <section class="home-columns-row container">
        <div class="home-column" :class="{ white: isWhite }" v-for="banner in banners" :style="BgImg">
          <h2>{{ banner.title }}</h2>
          <p>{{ banner.intro }}</p>
          <router-link to="#">了解更多</router-link>
        </div>
      </section>
      <article class="container">
        <div class="selection-heading clearfix">
          <div class="selection-title"><img src="../assets/img/article-icon.png">
            <p>文章精选</p></div>
        </div>

        <div class="selection-box" v-for="post in posts">
          <router-link :to="{ name: 'detail', params: { articleId: post.id }}"><h4>{{ post.title }}</h4></router-link>
          <p>{{ post.summary }}</p>
        </div>
      </article>

      <section class="development-tool-layout container">
        <div class="tool-heading clearfix">
          <div class="tool-title"><img src="../assets/img/tools-icon.png">
            <p>开发工具</p></div>
          <div class="selection-more">
            <router-link to="tools">更多<i class="glyphicon glyphicon-play"></i></router-link>
          </div>
        </div>
        <a v-for="tool in tools" :href="tool.id" class="tool-column" :title="tool.title">
          <div class="bg-flyme-sdk"></div>
          <div class="tool-column-text">
            <h4>{{ tool.title }}</h4>
            <p>{{ tool.summary }}</p>
          </div>
          <div class="tool-column-img">
            <img src="../assets/img/tool-flyme.png">
          </div>
        </a>
      </section>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'mainContent',
    data () {
      return {
        banners: [],
        standard:[],
        posts:[],
        tools:[],
        BgImg:{
          background: 'url(banner.bgImg)'
        },
        isWhite: false,
      }
    },
    methods: {
      click($event){
        $(".fdsug-layout").fadeIn();
        $(document).on("click", function () {
          $(".fdsug-layout").fadeOut();
        });

        $event.stopPropagation();   //阻止冒泡事件
        $(".fdsug-layout").one("click", function (e) {
          e.stopPropagation();
        });

        $(".bdsug-overflow").click(function () {
          $(".home-form-control").val($(this).text()).focus();
        })
      }
    },
    created(){
      this.$http.get('http://172.17.140.113:8360/api/index').then(response => {
        if (response.body && response.body.errno != 0) {
          let msg = response.body ? response.body.errmsg : '请求异常！！！'
          console.log(msg)
          return
        }
        try {
          response = response.body.data
          //console.dir(response)
          this.banners = response.hotBanner
          this.standard = response.hotStandard
          this.posts = response.posts
          this.tools = response.tools
        }
        catch(e){
          console.log(response)
        }

      }, response => {
          console.log(response)
      });

      const BgImg = ["#2a3546", "#006699", "#003366", "#336699"];
      let ImgNum = 0;

      function changeBgColor() {
        if (ImgNum <= 3) {
          $(".search-content-wrapper").css({
            "background": BgImg[ImgNum],
          });
          ImgNum++;
        } else {
          ImgNum = 0;
          $(".search-content-wrapper").css("background", BgImg[0]);
          ImgNum++;
        }
      }

      setInterval(changeBgColor, 30000);
    }
  }


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .search-content-wrapper {
    background: url("../assets/img/bg.png") no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    padding: 130px 0 105px 0;
  }

  .home-big-logo {
    text-align: center;
    color: #ffffff;
    margin-bottom: 35px;
  }

  .home-search-wrapper {
    display: block;
    margin: 0 auto;
    max-width: 790px;
    padding: 0 24px;
    position: relative;
    width: 100%;
  }

  #home-searchform {
    background: #fff;
    border-radius: 5px;
    display: block;
    margin: 0;
    width: 100%;
    position: relative;
  }

  .home-form-control {
    border-radius: 5px;
    border: none;
    color: #212121;
    outline: none;
    height: 45px;
    padding: 8px 8px 8px 44px;
    width: 100%;
  }

  .icon-search {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
  }

  .search-btn {
    display: none;
  }

  .fdsug-layout {
    display: none;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 24px;
    position: absolute;
    height: auto;
    left: 0;
    top: 46px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
  }

  .fdsug-layout li {
    color: #000;
    font: 14px arial;
    line-height: 30px;
    padding-left: 18px;
    cursor: pointer;
  }

  .fdsug-layout li:hover {
    color: #039be5;
  }

  .main-content {
    margin: 40px auto;
    max-width: 1400px;
    padding: 0 24px;
    position: relative;
  }

  .hot-content {
    margin-bottom: 64px;
    padding: 0 12px;
    text-align: center;
  }

  .hot-content-title {
    color: #333;
    font-size: 24px;
    font-family: PingFangSC-Light, sans-serif;
    font-weight: lighter;
    margin-bottom: 47px;
    margin-top: 16px;
  }

  .hot-content-link {
    display: inline-block;
    position: relative;
    color: #333;
    margin-bottom: 20px;
    height: 86px;
    text-align: center;
  }

  .hot-content-link:hover {
    color: #039be5;
    outline: 0;
    text-decoration: none;
  }

  .hot-content-img {
    display: block;
    margin: 0 auto;

    transition: all .3s ease-in-out
  }

  .hot-content-heading {
    font: 400 16px/24px sc-regular, sans-serif;
    margin: auto;
    overflow: visible;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .home-columns-row {
    flex-wrap: wrap;
    /*margin-bottom: 80px;*/
  }

  .home-column {
    display: inline-block;
    overflow: hidden;
    padding: 42px 35px 0 35px;
    margin:0 20px 20px;
    position: relative;
    width: calc((100% - 80px) / 2);
    min-height: 210px;
    box-shadow: 2px 4px 10px #B8B8B8;
    font-size: 16px;
  }

  .home-column a {
    color: #039be5;
  }


  .white h2{
    color: #fff;
  }

  .white p {
    color: #fff;
  }

  .white a {
    color: #fff;
  }

  .home-column-white a {
    margin-top: 16px;
    margin-bottom: 28px;
    color: #fff;
  }

  .home-column h2 {
    border-bottom: none;
    font-size: 30px;
    font-family: sc-bold, sans-serif;
    font-weight: 700;
    margin: 0 0 6px;
    padding: 0;
  }

  .home-column p {
    padding: 0;
  }

  .home-column img {
    position: absolute;
    right: 0;
    top: 0;
  }

  .selection-heading {
    margin-top: 72px;
    margin-bottom: 14px;
  }

  .selection-title {
    float: left;
    display: inline-block;
    vertical-align: middle
  }

  .selection-title img {
    float: left;
    width: 21px;
    height: 27px;
    margin-top: 1px;
  }

  .selection-title p {
    font-family: pingfang, sans-serif;
    float: left;
    margin: 0 0 0 10px;
    font-size: 24px;
    line-height: 30px;
    color: #000;
  }

  .tool-title {
    float: left;
    display: inline-block;
    vertical-align: middle
  }

  .tool-title img {
    float: left;
    width: 23px;
    height: 22px;
    margin-top: 4px;
  }

  .tool-title p {
    font-family: pingfang, sans-serif;
    float: left;
    margin: 0 0 0 10px;
    font-size: 24px;
    line-height: 30px;
    color: #000;
  }

  .selection-more {
    float: right;
  }

  .selection-more a {
    color: #24c577;
    font-size: 16px;
    line-height: 34px;
  }

  .selection-box {
    display: inline-block;
    overflow: hidden;
    padding: 20px 0;
    margin: 0 20px;
    position: relative;
    width: calc((100% - 84px) / 2);
    border-bottom: 1px solid #BBBBBB;
  }

  .selection-box h4 {
    color: #333;
    font-family: sc-bold, sans-serif;
    line-height: 26px;
    font-size: 16px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .selection-box p {
    color: #666;
    line-height: 26px;
    height: 52px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .development-tool-layout {
    margin: 72px auto 90px auto
  }

  .tool-heading {
    margin: 0 0 24px 0;
  }

  .development-tool img {
    width: 30px;
    height: 30px;
    display: inline;
  }

  .tool-column {
    display: inline-block;
    position: relative;
    background: #fff;
    padding: 0;
    width: calc((100% - 123px) / 4);
    height: 163px;
    box-shadow: 2px 4px 10px #B8B8B8;
    margin-right: 36px;
  }

  .tool-column:last-child {
    margin-right: 0;
  }

  .bg-flyme-sdk {
    width: 0;
    height: 0;
    border-bottom: 163px solid #0a7ede;
    border-right: 48px solid transparent;
    border-left: 140px solid #0a7ede;
  }

  .bg-phone-helper {
    width: 0;
    height: 0;
    border-bottom: 163px solid #4f489c;
    border-right: 50px solid transparent;
    border-left: 140px solid #4f489c;
  }

  .bg-dynamic-editor {
    width: 0;
    height: 0;
    border-bottom: 163px solid #35b1e0;
    border-right: 50px solid transparent;
    border-left: 140px solid #35b1e0;
  }

  .bg-material-management {
    width: 0;
    height: 0;
    border-bottom: 163px solid #de3131;
    border-right: 50px solid transparent;
    border-left: 140px solid #de3131;
  }

  /*这里专为平板做适配*/
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .tool-column {
      display: inline-block;
      position: relative;
      background: #fff;
      padding: 0;
      margin-bottom: 20px;
      width: calc((100% - 77px) / 2);
      height: 170px;
      box-shadow: 2px 4px 10px #B8B8B8;
    }

    .bg-flyme-sdk {
      width: 0;
      height: 0;
      border-bottom: 170px solid #0a7ede;
      border-right: 50px solid transparent;
      border-left: 140px solid #0a7ede;
    }

    .bg-phone-helper {
      width: 0;
      height: 0;
      border-bottom: 170px solid #4f489c;
      border-right: 50px solid transparent;
      border-left: 140px solid #4f489c;
    }

    .bg-dynamic-editor {
      width: 0;
      height: 0;
      border-bottom: 170px solid #35b1e0;
      border-right: 50px solid transparent;
      border-left: 140px solid #35b1e0;
    }

    .bg-material-management {
      width: 0;
      height: 0;
      border-bottom: 170px solid #de3131;
      border-right: 50px solid transparent;
      border-left: 140px solid #de3131;
    }

    .home-animation {
      background: #fff;
      color: #000;
    }

    .home-sdk {
      background: #3e4fa7;
      color: #fff;
    }
  }

  .tool-column-text {
    position: absolute;
    top: 50%;
    margin-top: -26px;
    left: 4%;
    color: #fff;
  }

  .tool-column-img {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    right: 23px;
  }

  .tool-column-img img {
    width: 100%;
    height: 100%;
  }

  .tool-column-text h4, .tool-column-text p {
    /*color: #fff;*/
  }

  .tool-column-text h4 {
    font-size: 16px;
    font-family: sf-bold, sans-serif;
  }

  .tool-column-text p {
    font-size: 13px;
  }

  /*首页媒体查询*/
  @media screen and (max-width: 768px) {
    .search-content-wrapper {
      padding: 40px 0 80px 0;
    }

    .main-content {
      margin: 40px auto;
      max-width: 100%;
      padding: 0;
      position: relative;
    }

    .navbar-nav > li {
      margin: 0;
      display: inline-block;
    }

    .home-big-logo img {
      width: 220px;
      height: 30px;
    }

    .icon-search {
      display: none;
    }

    .home-form-control {
      padding-left: 24px;
    }

    .search-btn {
      display: block;
      width: 60px;
      height: 45px;
      position: absolute;
      right: -1px;
      top: 0;
      border: 0;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      outline: none;
      background: #387aff;
      color: #fff;
    }

    .fdsug-layout li {
      padding-left: 0;
    }

    .hot-content {
      margin-bottom: 20px;
      text-align: center;
    }

    .home-column {
      display: inline-block;
      overflow: hidden;
      padding: 50px 40px;
      position: relative;
      margin: 20px 0;
      width: calc(100%);
    }

    .selection-box {
      display: inline-block;
      overflow: hidden;
      padding: 20px 0;
      position: relative;
      margin: 0;
      width: calc(100%);
      border-bottom: 1px solid #BBBBBB;
    }

    .development-tool-layout {
      margin-top: 20px;
    }

    .home-animation {
      background: #fff;
      color: #000;
    }

    .home-sdk {
      background: #3e4fa7;
      color: #fff;
    }

    .bg-flyme-sdk {
      width: 0;
      height: 0;
      border-bottom: 170px solid #0a7ede;
      border-right: 50px solid transparent;
      border-left: 170px solid #0a7ede;
    }

    .bg-phone-helper {
      width: 0;
      height: 0;
      border-bottom: 170px solid #4f489c;
      border-right: 50px solid transparent;
      border-left: 170px solid #4f489c;
    }

    .bg-dynamic-editor {
      width: 0;
      height: 0;
      border-bottom: 170px solid #35b1e0;
      border-right: 50px solid transparent;
      border-left: 170px solid #35b1e0;
    }

    .bg-material-management {
      width: 0;
      height: 0;
      border-bottom: 170px solid #de3131;
      border-right: 50px solid transparent;
      border-left: 170px solid #de3131;
    }

    .tool-column-text h4 {
      font-size: 16px;
    }

    .tool-column-text p {
      font-size: 15px;
    }

    .tool-heading {
      width: 100%;
      margin: 20px 0;
      padding: 0;
    }

    .tool-column {
      display: inline-block;
      position: relative;
      padding: 0;
      width: calc(100%);
      height: 170px;
      margin-bottom: 20px;
    }

    .tool-column-left {
      margin-right: 0;
    }

    .selection-heading {
      margin: 20px 0 0;
    }
  }
</style>
